// 封装监听目标元素进入视口的通用逻辑
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export function useObserver (apiFn) {
  // 监听的目标对象
  const target = ref(null)
  // stop 是一个可执行的方法 调用就会停止监听
  // 不管元素进入还是离开视口区域都不会再执行回调函数
  // 注意：不会只监听一次  只有进入视口或者离开视口回调函数都会执行
  const { stop } = useIntersectionObserver(
    // 监听目标元素
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting 布尔值 代表当前监听的元素是否进入视口区域
      console.log(isIntersecting)
      // ...判断  一旦为true 就发送ajax
      if (isIntersecting) {
        // 发起网络请求
        apiFn()
        // 请求数据完毕停止监听
        stop()
      }
    }
  )
  return {
    target
  }
}

/**
 * 组件数据懒加载
 *  1.解决的问题
 *    网络层面的优化 只有组件进入视口才会获取数据 (渲染层面优化)
 *
 *  2.实现思路
 *    监听组件是否已经进入到视口区域 在进入之后发送ajax
 *
 *  3.技术手段
 *    useIntersectionObserver
 *    对目标元素进行监听  然后满足条件执行回调  回调中就可以发送ajax
 *
 *  4.注意点
 *    1. target ref对象
 *    2. 正常情况下 每次进入视口移出视口都会再次执行回调
 *    3. 正常逻辑下 不应执行多次  可以使用stop在执行了首次加载之后 停止监听
 */
